<!-- 角色信息 -->
<!-- 角色信息 -->
<template>
  <el-dialog v-model="dialogVisible" width="400" title="设置" draggable appendToBody destroyOnClose lockScroll :closeOnClickModal="false">
    <el-form ref="elFormRef" v-loading="initLoading" :model="formData" :rules="rules" scrollToError statusIcon>
      <el-form-item label="显示昨日数据时间" labelWidth="10em" prop="showRecordTime">
        <el-time-select v-model="formData.showRecordTime" start="00:00" end="24:00" placeholder="请选择时间"></el-time-select>
      </el-form-item>
      <el-form-item label="默认支付提成比例" labelWidth="10em" prop="thatDayLimitRate">
        <base-input-number
          v-model="formData.thatDayLimitRate"
          :decimals="2"
          :min="thatDayLimitRateMin"
          :max="thatDayLimitRateMax"
          verify="add_float"
          placeholder="请输入支付提成比例"
          clearable
        ></base-input-number>
      </el-form-item>
      <el-form-item labelWidth="0em">
        <div style="width: 100%; padding-top: 20px">
          <el-button style="width: 100%" type="success" :loading="submitLoading" :disabled="submitLoading" :icon="IconPlus" @click="submit">保存</el-button>
        </div>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script setup lang="ts">
  import IconPlus from '~icons/ep/plus';
  import type { FormInstance, FormRules } from 'element-plus';
  import { type GlobalDefault, getCooperationDefaultAxios, settingCooperationDefaultAxios } from '@/api/cooperation-management';

  type $ShowData = {
    /** 设置完成后的回调 */
    settingCallBack?: () => void;
  };
  let settingCallBack: $ShowData['settingCallBack'] = undefined;
  const initLoading = ref(true);
  const submitLoading = ref(false);
  const dialogVisible = ref(false);
  const elFormRef: Ref<FormInstance | null> = ref(null);

  const formData: GlobalDefault = reactive<GlobalDefault>({
    showRecordTime: '12:00',
    thatDayLimitRate: 80,
  });

  const thatDayLimitRateMin = 1;
  const thatDayLimitRateMax = 100;
  const rules: FormRules = {
    showRecordTime: [{ required: true, type: 'string', message: '群设置显示昨日数据时间', trigger: ['blur', 'change'] }],
    thatDayLimitRate: [
      { required: true, type: 'number', message: '请输入支付提成比例', trigger: ['blur', 'change'] },
      {
        min: thatDayLimitRateMin,
        max: thatDayLimitRateMax,
        type: 'number',
        message: `支付提成比例只能输入${thatDayLimitRateMin}-${thatDayLimitRateMax}`,
        trigger: ['blur', 'change'],
      },
    ],
  };

  /**
   * 显示
   */
  async function show(data: $ShowData) {
    settingCallBack = 'settingCallBack' in data && typeof data.settingCallBack === 'function' ? data.settingCallBack : undefined;
    dialogVisible.value = true;
    try {
      initLoading.value = true;
      const res = await getCooperationDefaultAxios();
      formData.showRecordTime = res.data.showRecordTime ?? '12:00';
      formData.thatDayLimitRate = typeof res.data.thatDayLimitRate === 'number' ? res.data.thatDayLimitRate * 100 : 80;
      initLoading.value = false;
    } catch (error) {
      formData.showRecordTime = '12:00';
      formData.thatDayLimitRate = 80;
      initLoading.value = false;
    }
  }

  /**
   * 隐藏
   */
  function hide() {
    dialogVisible.value = false;
  }

  /** 提交 */
  async function submit() {
    try {
      await elFormRef.value?.validate();
      try {
        submitLoading.value = true;
        await settingCooperationDefaultAxios(formData);
        typeof settingCallBack === 'function' && settingCallBack();
        ElToast.success('操作成功');
        hide();
        submitLoading.value = false;
      } catch (error) {
        submitLoading.value = false;
        ElToast.error(error.msg || '提交失败，-BD003');
      }
    } catch (error) {
      ElToast.error('提交失败，请完善表单，-BD002');
    }
  }

  defineExpose({ show, hide });
</script>
